<template>
  <div class="transfer">
      <DialogComp width="45%">
          <template #header>
              <el-form>
                  <el-form-item label="部门">
                      <el-select v-model="departmentId" @change="changeDepartment">
                          <el-option v-for="item in departmentLists" :value="item.id" :label="item.name">
                              {{ item.name }}
                          </el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item label="班级" v-if="transfer.type === 'stu'">
                  
                      <el-select v-model="classId" :disabled="!departmentId"
                      @change="changeClass"
                      >
                          <el-option v-for="item in classList" :key="item.id" :label="item.name" :value="item.id">{{
                                  item.name
                          }}</el-option>
                      </el-select>
                  </el-form-item>


              </el-form>
          </template>
          <template #content>
              <el-transfer 
              :props="{label: 'name', key: 'id'}" 
              v-model="selectedArr" 
              @left-check-change="left"
              @right-check-change="right"
              :titles="['未选', '全选']"
              :data="list" />
          </template>
          <template #footer>
              <el-button @click="show = false">取消</el-button>
              <el-button type="primary" @click="confirm">
                  确定
              </el-button>
          </template>

      </DialogComp>
  </div>
</template>
<script setup lang='ts'>
import { useDialogStore } from '../../store/dialog';
import { reactive, toRefs ,watch} from 'vue';
import { ElMessage } from 'element-plus'
import {classesList,departmentList,studentList,teacherList,getlimitStu,getlimitTeacher,getmarkteachers,addLimitStudent,addLimitTeacher,addMarkingTeacher} from '../../api/student'
import DialogComp from '../textAdmin/textDialog.vue'
const emit = defineEmits(['addSelected'])
const { transfer,show,id,title } = toRefs(useDialogStore())
const data = reactive({
  departmentId: '', // 部门id
  classId: '', // 班级id
  departmentLists: [] as any,
  classList: [] as any,
  value: [],
  list: [
  [
          {
              "id": 2,
              "pid": 0,
              "name": "全栈方向",
              "leaf": 1,
              "children": null
          },
          {
              "id": 1,
              "pid": 0,
              "name": "大数据方向",
              "leaf": 0,
              "children": [
                  {
                      "id": 3,
                      "pid": 1,
                      "name": "高级阶段",
                      "leaf": 1,
                      "children": null
                  }
              ]
          }
      ]
  ],
 selectedArr: [] as number[]

})
const { departmentId, selectedArr,list, classId, classList, departmentLists,value } = toRefs(data)
// 选择班级id 请求学生列表
const changeClass = async (classid: number) => {
// 清空之前的数据
 selectedArr.value = []
  // 请求学生列表
  const { data } = await studentList({ classid })
  list.value = data.list
}
// 请求部门列表数据
const getDepartmentList = async () => {
  const { data } = await departmentList({})
  departmentLists.value = data.list
}
getDepartmentList()
// 班级列表
const getClasstList = async (depid: number) => {
  const { data } = await classesList({ depid })
  classList.value = data.list
}

// 获取老师列表
const getTeacherList = async (depid: number) => {
  const { data } = await teacherList({ depid })
  list.value = data.list
}

// 切换部门列表
const changeDepartment = (id: number) => {
  // 根据部门id请求对应数据 班级 可见老师 阅卷老师
  switch (transfer.value.type) {
      case 'stu':
          getClasstList(id)
          break
      case 'teacher':
      case 'marking':
          getTeacherList(id)
          break
  }

}

// 穿梭框左边选中
const left = (arr: number[]) => {
selectedArr.value.push(...arr)
}
const right = (arr: number[]) => {
selectedArr.value = selectedArr.value.filter(item => !arr.includes(item))
}

// 监听弹出层状态 / 保存状态
watch(show, async val => {
  if (val) {
      let result: any = null
      let params = { testid: id.value }
      // 回显已选择的数据状态  selectedArr.value
      if (transfer.value.type === 'stu') {
          result = await getlimitStu(params)
      } else if (transfer.value.type === 'teacher') {
          result = await getlimitTeacher(params)
      } else if (transfer.value.type === 'marking') {
          result = await getmarkteachers(params)
      }
      const { data } = result
      list.value = Array.isArray(data) ? data : data.list
      selectedArr.value = list.value.map((item:any) => item.id) 
  } else {
      departmentId.value = ''
      classId.value = ''
      selectedArr.value = []
  }
})
// 点击确定修改可见学生/老师/阅卷老师数据
const confirm = async () => {
  if (selectedArr.value.length === 0) {
      ElMessage.info('请选择添加项')
      return
  }
  // 存放调用添加接口返回的对象
  let res: any = null
  let type = transfer.value.type
  let data = {
      testid: id.value,
      list: selectedArr.value.map(item => ({ id: item}))
  } as any
  if ( type === 'stu') {
      data.list = selectedArr.value.map(item => ({ studentid: item}))
      res = await addLimitStudent(data)
  } else if (type === 'teacher') {
      res = await addLimitTeacher(data)
  } else if (type === 'marking') {
      res = await addMarkingTeacher(data)
  }
  const { errCode } = res
  if (errCode === 10000) {
      // 提交更改
      ElMessage.success('添加成功')
      show.value = false
  }
  // 发送给父组件提交表单以及显示角标 ata.list.length
  emit('addSelected', data.list)
}
</script>


<style lang='less' scoped>
.transfer {
  .el-form {
      display: flex;
  }

  .el-form-item:nth-of-type(1) {
      margin-right: 8px;
  }

  .el-transfer {
      display: flex;
  }

  :deep(.el-transfer-panel) {
      flex: 1;
  }

  :deep(.el-transfer__buttons) {
      display: none;
  }
}
</style>